<template>
  <a-modal
    v-model:visible="innerVisible"
    title="搜索会员"
    :width="600"
    class="member-list-modal"
    @ok="ok"
    @cancel="cancel"
  >
    <a-form>
      <a-form-item label="会员昵称" class="!mb-3">
        <a-input-search v-model:value="keyword" placeholder="请输入昵称关键字" enter-button @search="onSearch" />
      </a-form-item>
    </a-form>
    <div class="mb-3" v-show="innerCheckedMembers.length > 0">
      <a-tag color="blue" v-for="(el, i) in innerCheckedMembers" :key="el.id" closable @close="remove(i)">
        {{ el.nickName }}
      </a-tag>
    </div>
    <a-spin :spinning="loading">
      <MemberList :data="pageData" v-if="pageData.length > 0" :checked="true" @change="checkChange" />
      <a-empty v-else />
    </a-spin>
    <a-pagination v-bind="pagination" />
  </a-modal>
</template>
<script lang="ts">
import { ref, defineComponent, watch, PropType } from "vue";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/img";
import { getAppUsers, AppUserInfo } from "/@/api/manage/userManage";
import { usePagination } from "/@/hooks/web/usePagination";
import MemberList from "/@/components/MemberList.vue";
import { message } from "ant-design-vue";

export default defineComponent({
  components: {
    MemberList,
  },
  props: {
    visible: {
      required: true,
      type: Boolean,
    },
    checkedMembers: {
      default() {
        return [];
      },
      type: Array as PropType<AppUserInfo[]>,
    },
  },
  setup(props: any, ctx) {
    const { refreshPagination, pagination, pageData, loading } = usePagination<AppUserInfo, any>(getAppUsers, 9);
    const innerCheckedMembers = ref<AppUserInfo[]>(props.checkedMembers || []);
    function updateCheckedMembers() {
      ctx.emit("update:checkedMembers", [...innerCheckedMembers.value]);
    }
    function checkChange(member: AppUserInfo) {
      if (member.checked) {
        innerCheckedMembers.value.push(member);
      } else {
        innerCheckedMembers.value.forEach((item, i) => {
          if (item.id === member.id) {
            innerCheckedMembers.value.splice(i, 1);
            return false;
          }
        });
      }
      updateCheckedMembers();
    }
    watch(
      () => props.checkedMembers,
      (v) => {
        innerCheckedMembers.value = v;
      }
    );
    function pageDataWatch(data) {
      data.forEach((item) => {
        item.checked = !!innerCheckedMembers.value.find((member) => member.id === item.id);
      });
    }
    watch(pageData, pageDataWatch);

    const keyword = ref("");
    function onSearch() {
      refreshPagination({ model: { nickName: keyword.value } });
    }
    const innerVisible = ref(false);
    watch(
      () => props.visible,
      (v) => {
        innerVisible.value = v;
        if (v) {
          onShow();
        }
      }
    );
    watch(innerVisible, (v) => {
      ctx.emit("update:visible", v);
    });
    let isFirst = true;
    let showData: AppUserInfo[] = [];
    async function onShow() {
      if (isFirst) {
        await refreshPagination();
      } else {
        pageDataWatch(pageData.value);
      }
      isFirst = false;
      showData = [...innerCheckedMembers.value];
    }
    function ok() {
      if (innerCheckedMembers.value.length === 0) {
        message.info("请至少选择一个会员");
        return;
      }
      innerVisible.value = false;
    }
    function cancel() {
      innerCheckedMembers.value = showData;
      updateCheckedMembers();
    }
    function remove(index) {
      innerCheckedMembers.value.splice(index, 1);
      updateCheckedMembers();
    }
    return {
      DEFAULT_IMG_BASE64_STR,
      keyword,
      onSearch,
      pageData,
      pagination,
      innerVisible,
      loading,
      ok,
      checkChange,
      innerCheckedMembers,
      remove,
      cancel,
    };
  },
});
</script>
<style lang="less">
.member-list-modal {
  .ant-card-meta-description,
  .member-des {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
  }
  .member-des {
    -webkit-line-clamp: 6;
    line-clamp: 6;
  }
}
</style>
